import streamlit as st

def pages():
    # 终极解决方案 - 使用更全面的CSS选择器

    # 第一个元素直接顶到最上面，使用更紧凑的边距
    st.markdown("""
    <div style='background-color: #f0f2f6; padding: 15px; border-radius: 10px; margin: 0 0 10px 0;'>
        <h3 style='color: #2e86ab; margin: 0;'>✨ 核心功能概览</h3>
        <p style='margin: 5px 0 0 0;'>欢迎体验我们全新升级的功能模块，这里集合了最前沿的数据处理与模型开发工具！</p>
    </div>
    """, unsafe_allow_html=True)

    # 使用列布局展示功能
    col1, col2 = st.columns(2)

    with col1:
        st.markdown("""
        <div style='background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); 
                    padding: 15px; 
                    border-radius: 15px; 
                    color: white;
                    margin: 5px 0;
                    box-shadow: 0 4px 6px rgba(0,0,0,0.1);'>
            <h4 style='color: white; margin: 0 0 8px 0;'>📊 数据集预览功能</h4>
            <ul style='color: white; margin: 0; padding-left: 18px; font-size: 14px;'>
                <li>智能数据探索与可视化</li>
                <li>多格式数据支持</li>
                <li>实时数据质量评估</li>
                <li>自动统计分析</li>
            </ul>
        </div>
        """, unsafe_allow_html=True)
        
        # st.markdown("""
        # <div style='background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); 
        #             padding: 15px; 
        #             border-radius: 15px; 
        #             color: white;
        #             margin: 5px 0;
        #             box-shadow: 0 4px 6px rgba(0,0,0,0.1);'>
        #     <h4 style='color: white; margin: 0 0 8px 0;'>📈 数据统计自主分析</h4>
        #     <ul style='color: white; margin: 0; padding-left: 18px; font-size: 14px;'>
        #         <li>自动化分析报告生成</li>
        #         <li>AI驱动的数据洞察</li>
        #         <li>自定义分析指标</li>
        #         <li>交互式数据探索</li>
        #     </ul>
        # </div>
        # """, unsafe_allow_html=True)

    with col2:
        st.markdown("""
        <div style='background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); 
                    padding: 15px; 
                    border-radius: 15px; 
                    color: white;
                    margin: 5px 0;
                    box-shadow: 0 4px 6px rgba(0,0,0,0.1);'>
            <h4 style='color: white; margin: 0 0 8px 0;'>🎯 大模型图像数据标定</h4>
            <ul style='color: white; margin: 0; padding-left: 18px; font-size: 14px;'>
                <li>高效智能标注工具</li>
                <li>多模态任务支持</li>
                <li>团队协作标定</li>
                <li>质量监控体系</li>
            </ul>
        </div>
        """, unsafe_allow_html=True)
        
    #     st.markdown("""
    #     <div style='background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%); 
    #                 padding: 15px; 
    #                 border-radius: 15px; 
    #                 color: white;
    #                 margin: 5px 0;
    #                 box-shadow: 0 4px 6px rgba(0,0,0,0.1);'>
    #         <h4 style='color: white; margin: 0 0 8px 0;'>⚙️ 模型设置</h4>
    #         <ul style='color: white; margin: 0; padding-left: 18px; font-size: 14px;'>
    #             <li>直观参数配置</li>
    #             <li>实验管理跟踪</li>
    #             <li>性能实时监控</li>
    #             <li>简化部署流程</li>
    #         </ul>
    #     </div>
    #     """, unsafe_allow_html=True)

    # 其余内容保持不变...
    st.markdown("---")
    st.markdown("### 💫 特色亮点")

    highlight_col1, highlight_col2, highlight_col3 = st.columns(3)

    with highlight_col1:
        st.markdown("""
        <div style='text-align: center; padding: 8px;'>
            <h4 style='color: #ff6b6b; margin: 0;'>🎨 用户体验</h4>
            <p style='margin: 3px 0 0 0; font-size: 14px;'>现代化界面设计，流畅交互体验</p>
        </div>
        """, unsafe_allow_html=True)

    with highlight_col2:
        st.markdown("""
        <div style='text-align: center; padding: 8px;'>
            <h4 style='color: #4ecdc4; margin: 0;'>🔧 技术优势</h4>
            <p style='margin: 3px 0 0 0; font-size: 14px;'>高性能处理引擎，可扩展架构</p>
        </div>
        """, unsafe_allow_html=True)

    with highlight_col3:
        st.markdown("""
        <div style='text-align: center; padding: 8px;'>
            <h4 style='color: #45b7d1; margin: 0;'>☁️ 云端协同</h4>
            <p style='margin: 3px 0 0 0; font-size: 14px;'>无缝数据同步，团队高效协作</p>
        </div>
        """, unsafe_allow_html=True)

    st.markdown("---")
    # st.markdown("### 📋 使用流程")

    # steps = [
    #     ("1. 数据准备", "使用数据集预览功能了解数据特征"),
    #     ("2. 数据标定", "通过图像标定工具完善训练数据"),
    #     ("3. 统计分析", "深入分析数据分布和质量"),
    #     ("4. 模型配置", "设置合适的模型参数和训练策略"),
    #     ("5. 训练优化", "监控训练过程并持续优化")
    # ]

    # for step, description in steps:
    #     st.markdown(f"<div style='margin: 2px 0;'><strong>{step}</strong> - {description}</div>", unsafe_allow_html=True)
    st.markdown("### 📋 使用流程")

    steps = [
        ("1. 数据准备", "使用数据集预览功能快速了解数据特征与分布"),
        ("2. 数据标定", "借助智能图像标定工具精准标注训练数据"),
        ("3. 统计分析", "深入挖掘数据分布规律与质量评估"),
        ("4. 模型配置", "灵活调整模型参数与训练策略配置"),
        ("5. 训练优化", "实时监控训练进度并持续优化模型性能")
    ]

    # 创建更美观的步骤展示
    for i, (step, description) in enumerate(steps, 1):
        st.markdown(f"""
        <div style='background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); 
                    padding: 12px 15px; 
                    border-radius: 10px; 
                    margin: 8px 0;
                    border-left: 4px solid #4ecdc4;
                    box-shadow: 0 2px 4px rgba(0,0,0,0.05);'>
            <div style='display: flex; align-items: center;'>
                <div style='background-color: #4ecdc4; 
                            color: white; 
                            width: 25px; 
                            height: 25px; 
                            border-radius: 50%; 
                            display: flex; 
                            align-items: center; 
                            justify-content: center;
                            font-weight: bold;
                            margin-right: 12px;'>
                    {i}
                </div>
                <div>
                    <strong style='color: #2c3e50; font-size: 15px;'>{step.split('. ')[1]}</strong>
                    <p style='color: #546e7a; margin: 2px 0 0 0; font-size: 13px;'>{description}</p>
                </div>
            </div>
        </div>
        """, unsafe_allow_html=True)


    st.markdown("---")
    st.markdown("""
    <div style='text-align: center; color: #666;'>
        <p style='margin: 3px 0;'><strong>开始您的AI开发之旅吧！</strong> 🚀</p>
        <p style='margin: 3px 0; font-size: 14px;'><em>选择您感兴趣的功能模块，体验智能化的数据处理流程</em></p>
    </div>
    """, unsafe_allow_html=True)

if __name__ == "__main__":
    pages()